<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 兼容移动设备 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>手势轮播</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }

    /* 轮播区域 */
    .carousel-layout {
      width: 100%;
      height: 250px;
      overflow: hidden;
      position: relative;
    }

    .carousel-panel {
      width: 400%;
      height: 100%;
      display: flex;
    }

    .carousel-item {
      width: 100%;
      color: white;
      text-align: center;
      line-height: 250px;
    }

    /* 标记小圆点 */
    .dot-panel {
      text-align: center;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
    }

    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 9px;
      border: 1px solid #808080;
      background-color: white;
      transition: all .2s linear;
      cursor: pointer;
    }

    .dot-active {
      background-color: yellow;
    }

    .tips {
      color: blue;
      padding: 5px;
    }
  </style>
</head>
<body>

<div class="carousel-layout">
  <div id="carousel" class="carousel-panel">
    <div class="carousel-item" style="background-color: #5FB878;">示例1</div>
    <div class="carousel-item" style="background-color: #009688;">示例2</div>
    <div class="carousel-item" style="background-color: green;">示例3</div>
    <div class="carousel-item" style="background-color: blue;">示例4</div>
  </div>
  <div class="dot-panel">
    <a class="dot dot-active"></a>
    <a class="dot"></a>
    <a class="dot"></a>
    <a class="dot"></a>
  </div>
</div>
<div class="tips">这里只是作为一个介绍跟随移动的示例，仅仅实现了，该插件的效果(跟随手势移动), 没有实现自动轮播的效果！</div>

<script src="../dist/motion.js"></script>
<script>

  function $(s) {
    return document.getElementsByClassName(s);
  }

  // 滚动的距离, 每一次完整的滚动都是每一项的宽度
  var step = $('carousel-item')[0].offsetWidth;
  // 手势结束后, 触发滚动到下一页的滚动的最小距离
  var min = 10;
  var index = 0; // 当前处于哪一页
  var $dots = $('dot'); // 所有的小圆点

  // 更新小圆点
  function updateDot(lastIndex, currIndex) {
    console.log(currIndex);
    $dots[lastIndex].classList.remove('dot-active');
    $dots[currIndex].classList.add('dot-active');
  }

  var m = new Motion({
    elem: '#carousel', // 响应手势事件的节点
    property: 'translateX', // 响应移动的属性
    touchEnd: function (ext, md) { // 手势抬起后的回调
      var scrollx = md.end - md.start; // 滚动的距离
      if (Math.abs(scrollx) >= min) { // 触发翻页
        if (scrollx > 0) { // 向右滑动, 上一页
          if (index === 0) { // 已经是最后一页, 回到初始的状态
            m.to(md.current);
          } else {
            m.to(md.current + step);
            updateDot(index, --index); // 更新小圆点
          }
        } else { // 向左滑动, 下一页
          if (index === 3) { // 已经是最后一页, 回到初始的状态
            m.to(md.current);
          } else {
            m.to(md.current - step);
            updateDot(index, ++index); // 更新小圆点
          }
        }
      } else { // 未触发翻页, 回到初始的状态
        m.to(md.current);
      }
    }
  });
</script>
</body>
</html>